<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />&nbsp;搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :inline="true" size="mini" label-width="auto">
            <!-- 历史任务模块独有 -->
            <el-form-item v-if="type === scheduleListID.historicalTasks" label="item_ID">
              <el-input v-model.trim="searchData.itemId" placeholder="请输入item_ID" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item v-if="type !== scheduleListID.historicalTasks" label="6位供应商号">
              <el-input v-model="searchData.createByVendorNbr6List" type="textarea" placeholder="请输入6位供应商号，多个回车换行隔开" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item label="部门">
              <el-input v-model="searchData.deptNbrList" type="textarea" placeholder="请输入部门，多个回车换行隔开" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item v-if="type !== scheduleListID.historicalTasks" label="供应商名称">
              <el-input v-model="searchData.createByVendorName" placeholder="请输入供应商名称" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item v-if="type === scheduleListID.historicalTasks" label="供应商名称">
              <el-input v-model="searchData.vendorName" placeholder="请输入供应商名称" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item label="商品名称">
              <el-input v-model.trim="searchData.skuName" placeholder="请输入商品名称" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item v-if="type !== scheduleListID.historicalTasks" label="UPC">
              <el-input v-model="searchData.upcList" type="textarea" placeholder="请输入UPC，多个回车换行隔开" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item label="UPC(不含检验码)">
              <el-input v-model="searchData.skuList" type="textarea" placeholder="请输入UPC(不含检验码)，多个回车换行隔开" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item v-if="type !== scheduleListID.historicalTasks" label="状态">
              <el-select v-model="searchData.mainStatusList" style="width: 250px;" multiple placeholder="请选择建品状态" collapse-tags clearable>
                <el-option
                  v-for="item in selectSatsus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item v-if="type !== scheduleListID.historicalTasks" label="建品方式">
              <el-select v-model="searchData.creationWayList" style="width: 250px;" multiple placeholder="请选择建品方式" collapse-tags clearable>
                <el-option
                  v-for="item in createGoodsTypeKind"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item v-if="type === scheduleListID.allTasks" label="SKU类型">
              <el-select v-model="searchData.skuType" style="width: 250px;" placeholder="请选择SKU类型" collapse-tags clearable>
                <el-option
                  v-for="item in skuType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="Fineline">
              <el-input v-model.trim="searchData.finelineNbr" placeholder="请输入Fineline" clearable style="width: 250px;" />
            </el-form-item>

            <!-- 历史任务模块独有 -->
            <el-form-item v-if="type === scheduleListID.historicalTasks" label="状态">
              <el-select v-model="searchData.validateStatusList" style="width: 250px;" multiple placeholder="请选择建品状态" collapse-tags clearable>
                <el-option
                  v-for="item in verifyStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item v-if="type !== scheduleListID.historicalTasks" label="建品时间">
              <el-date-picker
                v-model="searchData.createByDate"
                style="width: 250px;"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>

            <el-form-item v-if="type !== scheduleListID.historicalTasks" label="更新时间">
              <el-date-picker
                v-model="searchData.updataByDate"
                style="width: 250px;"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>

            <el-form-item label=" ">
              <el-button id="searchBtn" size="mini" type="primary" icon="el-icon-search" round @click="$emit('search')">查询</el-button>
              <el-button id="resetBtn" size="mini" type="primary" icon="el-icon-refresh" round @click="$emit('reset')">重置</el-button>
              <el-button v-if="type === scheduleListID.allTasks" size="mini" icon="el-icon-download" type="primary" round @click="$emit('download')">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { createGoodsTypeKind, createGoodsStatus, processingTasksStatus, verifyStatus, skuType } from '@/views/coi/commonJs/dictionary'
import { scheduleListID } from '@/views/coi/commonJs/tableHeadList'

export default {
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      activeName: '1',
      createGoodsTypeKind: createGoodsTypeKind,
      scheduleListID,
      verifyStatus,
      skuType
    }
  },
  computed: {
    selectSatsus() {
      return this.type === scheduleListID.processingTasks ? processingTasksStatus : createGoodsStatus
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  padding-bottom: 8px;
}
/deep/ .el-form-item{
  margin-right: 0;
}
</style>

